<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, reactive, computed, onMounted, toRefs } from 'vue';
import { default as http, getImageUrl } from '@/utils/request.js';
import { showToast } from '@nutui/nutui';
const router = useRouter(); //获取到 router 对象，用于编程式跳转导航
const route = useRoute();   //获取路由对象
const onClickLeft = () => history.back();
//route.params.xxx 获取路径参数
console.log('commentInfo.commentId = ', route.params.commentId);

const commentInfo = reactive({
    userName: '',
    sellerName: '',
    details: '',
    goodsName: '',
    commentImg: '',
    commentTime: '',
    content: '',
    level: ''

});

const rate = () => { showToast('当前值：' + commentInfo.level) };
const getCommentInfo = () => {
    console.log("------------评论详情");
    http.get('/user/comment/' + route.params.commentId).then((res) => {
        commentInfo.sellerName = res.data.data.sellerName;
        commentInfo.orderNumber = res.data.data.orderNumber;
        commentInfo.details = res.data.data.details;
        commentInfo.goodsName = res.data.data.goodsName;
        commentInfo.commentImg = res.data.data.commentImg;
        console.log("评论内容：", res.data.data.commentImg)
        commentInfo.commentTime = res.data.data.commentTime;
        commentInfo.content = res.data.data.content;
        console.log("评论内容：", res.data.data.content)
        commentInfo.level = res.data.data.level;
        // resolve(); // 当获取待收货列表成功后，返回一个解析成功的Promise  
    }).catch(err => {
        //   reject(err); // 当请求失败时，返回一个请求失败的Promise  
    });

}


// onMounted(() => {
//     getCommentInfo();
//     // handleDelete(); 
//     // 获取个人信息  

// });

onMounted(() => {
    getCommentInfo();
});
const clickImages = (imgs) => {
    console.log('进行图片展示', imgs);
};
</script>

<template>
    <van-col class="nav_bar">
        <van-nav-bar title="评论详情" left-text="返回" :fixed="true" left-arrow @click-left="onClickLeft" />
    </van-col>
    <!-- <van-search v-model="value" shape="round" background="rgb(218, 218, 218)" placeholder="请输入搜索关键词" /><br> -->
    <van-cell-group inset style="width: 350px; margin-top: 40px;">
        <van-cell>
            <van-row style="margin-left: 8px;">
                <van-col>
                    <div>{{ commentInfo.sellerName }}</div>
                </van-col>
                <van-col style="margin-left: 96px ;">
                    <div>{{ commentInfo.commentTime }}</div>
                </van-col>
            </van-row>
            <van-row>
                <van-rate v-model="commentInfo.level" readonly />
            </van-row>
        </van-cell>
        <van-cell>
            <van-row>
                <van-col>
                    <div>{{ commentInfo.content }}</div>
                </van-col>
            </van-row>
        </van-cell>
        <van-cell>
            <!-- <van-image width="5rem" height="5rem" fit="cover" position="left" :src="getImageUrl(commentInfo.commentImg)" /> -->
            <van-row>
                <van-col style="border: 1.5px solid white;">
                    <van-image width="6rem" height="6rem" fit="cover" position="left" :src="getImageUrl(commentInfo.commentImg)" />
                
                </van-col>
            </van-row>
        </van-cell>
    </van-cell-group><br>
</template>




<style scoped>
.nav_bar {
    position: relative;
    top: -32px;
    /* left:-32px;
    right: -32px; */
    margin: 2px -32px
}
</style>